<template>
    <div class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <div class="userMsg">
                <CrossLine></CrossLine>
                <ul style="background:#fff;" >
                    <li class="mui-table-view-cell" @tap="bidRule">
                        <a class="mui-navigate-right">
                            <span class="usertit">询价规则</span>
                        </a>
                        <div class="rules" v-show="bidStatus" v-html="rulesData.bidRuleText">
                            {{rulesData.bidRuleText}}
                        </div>
                    </li>
                    <li class="mui-table-view-cell" @tap="crowdRule">
                        <a class="mui-navigate-right">
                            <span class="usertit" >拼单规则</span>  
                        </a>
                        <div class="rules" v-show="crowdStatus" v-html="rulesData.crowdRuleText">
                            {{rulesData.crowdRuleText}}
                        </div>
                    </li>
                    <li class="mui-table-view-cell" @tap="privateNorm">
                        <a class="mui-navigate-right">
                            <span class="usertit">隐私信息保护规范</span>  
                        </a>
                        <div class="rules" v-show="privateStatus" v-html="rulesData.privateNormText">
                            {{rulesData.privateNormText}}
                        </div>
                    </li>
                    <li class="mui-table-view-cell" @tap="serviceAgreement">
                        <a class="mui-navigate-right">
                            <span class="usertit">开星选车电商平台服务协议</span>  
                        </a>
                        <div class="rules" v-show="serviceStatus" v-html="rulesData.serviceAgreementText">
                            {{rulesData.serviceAgreementText}}
                        </div>
                    </li>
                </ul>      
            </div>
        </div>
    </div>
</template>

<script>
    import mui from 'static/js/mui'
    import CrossLine from '@/components/base/cross-line/cross-line'
    import storage from '@/utils/localstorage'
    export default {
        data() {
            return{
               bidStatus: false,
               crowdStatus: false,
               privateStatus: false,
               serviceStatus: false,
               rulesData:{
                   bidRuleText: '',
                   crowdRuleText: '',
                   privateNormText: '',
                   serviceAgreementText: ''
               }
            }
        },
        components: {
            CrossLine
        },
        props: {},
        methods: {
           init() {
               this.rulesData.bidRuleText = storage.getLocalstorage('globalConfig')[4]
               this.rulesData.crowdRuleText = storage.getLocalstorage('configDoc')['拼单规则']
               this.rulesData.privateNormText = storage.getLocalstorage('globalConfig')[2]
               this.rulesData.serviceAgreementText = storage.getLocalstorage('globalConfig')[3]
           },
           bidRule() {
               this.bidStatus = !this.bidStatus
           },
           crowdRule() {
               this.crowdStatus = !this.crowdStatus
           },
           privateNorm() {
               this.privateStatus = !this.privateStatus
           },
           serviceAgreement() {
               this.serviceStatus = !this.serviceStatus
           }
        },
        filters: {},
        computed: {},
        created() {
          this.init()
        },
        mounted() {
            mui.init({
            keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            });
           
            mui.back = function() {
              history.go(-1)
            };
            //竖向滚动
            scroll = mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: true, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: true //是否启用回弹
            });
        },
    };
</script>

<style lang="scss" scoped>
    .userpams{
        float:right;margin-right:20px;
        color:#999999;font-size:0.6rem;position:relative;top:1px;
    }
    .usertit{
        font-size:0.75rem;
        color:#333333;
    }

    .mui-table-view-cell:after {
        background-color: #E9E9E9;
    }
    .mui-navigate-right:after, .mui-push-left:after, .mui-push-right:after {
    font-family: Muiicons;
    font-size: inherit;
    line-height: 1;
    position: absolute;
    top: 40%;
    display: inline-block;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-decoration: none;
    color: #bbb;
    -webkit-font-smoothing: antialiased;
    transform: rotate(90deg);
    }
     /* 规则条款 */
    .rules{
        background: #fff;
        width: 100%;
        padding-top:10px;
    }
    .rules p{
        font-size:12px;
        padding-left:0px;
        padding-bottom:10px;
        padding-top:10px;
        margin-bottom:0px;
        text-align: justify;
    }
    .mui-bar-nav ~ .mui-content{
       padding-top: 0px; 
   }
</style>